<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<#assign base=request.contextPath  />
    <link rel="stylesheet" href="${base}/js/layui/css/layui.css"  media="all">
    <title></title>
</head>
<style type="text/css">
    .layui-bg-blu{
        color: #2c2c2c;
        background-color: #FFFFFF;
        border:2px solid #2c2c2c;
        border-radius:10px;
        width: 240px;
        height: 120px;
        font-size: 30px;


    }
    .layui-bg-blu:hover{
        color: red;
        font-size: 35px;
    }
    form{
        padding:20px;
    }
    .layui-btn-radius{
        border-radius: 5px;
    }
    .wh1{
        width: 50px;
        height: 20px;
        border-radius: 3px;
        background-color:#edc7b7;
    }
    #wh2{
        width: 50px;
        height: 20px;
        border-radius: 3px;
        background-color:#8e8d8a;
    }
    #wh3{
        width: 50px;
        height: 20px;
        border-radius: 3px;
        background-color:#e98074;
    }
</style>
<body>
<fieldset class="layui-elem-field layui-field-title">
    <legend>房态管理</legend>
</fieldset>
<div class="demoTable layui-form">
    <div class="demoTable" style="height: 40px;padding:15px;">
        <button class="layui-btn layui-btn-radius" id="btn2" onclick="javascript:insertHome()" style="background-color: #0092EF; width: 150px; data-method="offset" type="button">新增</button>
        <button class="layui-btn layui-btn-radius" id="btn3" onclick="javascript:delHome()" style=" background-color: red; width: 150px; data-method="offset" type="button">删除</button>
        <div class="layui-inline layui-form" style="float:right;" >
            房间号：<div class="layui-inline">
            <input class="layui-input" name="id"  id="sechText" autocomplete="off">
        </div>
            <button class="layui-btn layui-btn-radius" id="btn1" onclick="javascript:initHome(null,null)" data-type="reload" style="background-color: #0092EF;">搜索</button>
        </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title"></fieldset>
    <div id="checkS" style="margin-left: 20px">
        <div class="demoTable"style="float:right;margin-right: 30px">
            <span style="color:#666666;">打&nbsp;扫:&nbsp;&nbsp;&nbsp;<div class="layui-inline"><div class="wh1"></div></div>
            &nbsp;&nbsp;&nbsp;空&nbsp;闲:&nbsp;&nbsp;&nbsp;<div class="layui-inline"><div id="wh2"></div></div>
            &nbsp;&nbsp;&nbsp; 有&nbsp;人:&nbsp;&nbsp;&nbsp;<div class="layui-inline"><div id="wh3"></div></div><span>
        </div>
        朝&nbsp;&nbsp;&nbsp;向&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input name="like1" lay-skin="primary" title="朝南"   type="checkbox"   >
        <input name="like1" lay-skin="primary" title="朝北" type="checkbox"   >
        <input name="like1" lay-skin="primary" title="朝东" type="checkbox"   >
        <input name="like1" lay-skin="primary"title="朝西" type="checkbox"   ><br/><br/>
        状&nbsp;&nbsp;&nbsp;态&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input name="like2" lay-skin="primary" title="打扫" value="1031511187990364162" type="checkbox"   >
        <input name="like2" lay-skin="primary"title="有客" value="1031511221003730946" type="checkbox"   >
        <input name="like2" lay-skin="primary"title="空房" value="1031511203257630721" type="checkbox"  >

    </div>

</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top:10px;"></fieldset>
<div style="border: 1px solid #c2c2c2">
    <div class="site-demo-button" id="layerDemo" style="margin: 10px;">
        <div class="layui-btn-container" id="homes">



        </div
    </div>
</div>
<script src="${base}/js/layui/layui.js" charset="utf-8"></script>
<script src="${base}/js/jquery.min.js"></script>
<script>
    var roleValue='${roleValue}';
    if(roleValue =='9f77d5a8-75c6-4d06-adf9-a37e727d491a' ) {
        $("#btn2").show();
        $("#btn3").show();
    }else if(roleValue == 'cf8d0af0-f58b-4668-a996-85210de08866'){
        $("#btn2").show();
        $("#btn3").show();
    }else{
        $("#btn2").hide();
        $("#btn3").hide();
    }

    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
                ,layer = layui.layer
                ,layedit = layui.layedit
                ,laydate = layui.laydate;
        form.on('checkbox()', function(data){
            var checkData1="";
            var checkData2="";
            $("#checkS input:checkbox").each(function () {
                if ($(this).is(':checked')) {
                    if($(this).attr("name")=="like1"){
                        checkData1+=$(this).attr("title")+",";
                    }
                    if($(this).attr("name")=="like2"){
                        checkData2+=$(this).attr("value")+",";
                    }

                }
            });
            initHome(checkData1,checkData2);

        });


    });
    function toHomeifream(homeId,HomeState,label){
        layer.open({
            type: 2 //此处以iframe举例
            ,title: '房间详细信息'
            ,area: ['700px', '450px']
            ,shade: 0
            ,offset: 'auto'
            ,content: ['${base}/room/child.html?homeId='+homeId,'no']
            ,zIndex: layer.zIndex //重点1
            ,success: function(layero){

                layer.setTop(layero); //重点2
                var iframeWin = window[layero.find('iframe')[0]['name']];
                if(HomeState=="空闲"){
                    iframeWin.$(".l").css("display","none");

                }
                //给弹窗设置 homeID
                iframeWin.$("#homeId").val(homeId);
                //给弹窗设置 状态
                iframeWin.$("#creeState").val(HomeState);

                iframeWin.$("#homeLabel").append(label);
            }
        });
    }

    function initHome(data1,data2){
        $.ajax({
            type : "POST", //提交方式
            data:{"data1":data1,"data2":data2,"param":$("#sechText").val()},
            url : "${base}/room/findProjectByHomeName",//路径
            success : function(data) {//返回数据根据结果进行相应的处理

                var htm;
                if (data.length > 0){
                    for (var i = 0; i < data.length; i++) {
                        //打扫
                        if (data[i].roomStatus == '1031511187990364162') {
                            htm += '<button data-method="setTop" id="' + data[i].id + '"  style="background: #EDC7B7"  onclick="toHomeifream(' + "'" + data[i].id + "','打扫中'," + "'" + data[i].roomLabel + "'" + ')" class="layui-btn layui-bg-blu">' + data[i].name + '</button>'

                        }
                        //空闲
                        if (data[i].roomStatus == '1031511203257630721') {
                            htm += '<button data-method="setTop" id="' + data[i].id + '"  style="background:#8E8D8A"   onclick="toHomeifream(' + "'" + data[i].id + "','空闲'," + "'" + data[i].roomLabel + "'" + ')" class="layui-btn layui-bg-blu">' + data[i].name + '</button>'
                        }
                        //有人
                        if (data[i].roomStatus == '1031511221003730946') {
                            htm += '<button data-method="setTop" id="' + data[i].id + '"  style="background:  	#E98074"   onclick="toHomeifream(' + "'" + data[i].id + "','有人'," + "'" + data[i].roomLabel + "'" + ')" class="layui-btn layui-bg-blu">' + data[i].name + '</button>'
                        }

                    }
                }else {
                    htm="";
                }
                $("#homes").html(htm)

            }
        });
    }
    function insertHome(){
        // window.print()

        layer.open({
            type: 2 //此处以iframe举例
            ,area: ['480px', '500px']
            ,shade: 0

            ,offset: 'auto'
            ,content: ['${base}/room/add.html','no']
            ,zIndex: layer.zIndex //重点1
            ,success: function(layero){
                layer.setTop( layero); //重点2
            }
        });
    }
    function delHome() {
        layer.open({
            type: 2 //此处以iframe举例
            , area: ['500px', '400px']
            , shade: 0
            , offset: 'auto'
            , content: ['${base}/room/del.html', 'no']
            , zIndex: layer.zIndex //重点1
            , success: function (layero) {
                layer.setTop(layero); //重点2
            }
        });
    }
</script>

<script>

    initHome();

    layui.use('layer', function(){ //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句




    });

    //键盘事件
    $("body").bind("keydown",function(e){
        // 兼容FF和IE和Opera
        var theEvent = e || window.event;
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (code == 13) {
            //回车执行查询
            $("#btn1").click();
        }
    });

</script>
</body>
</html>
